<template>
	<div class="nav">
		<div class="container">
			<div class="row">
				<div class="sm5 offset-sm1 xs5 offset-xs1">
					<div class="logo"><img src="../../static/images/logo_100.png" />Fuyun-<span>博客</span></div>
				</div>
				<div class="span6 xs-hide">
					<el-menu theme="dark" default-active="2" class="el-menu-parallel" mode="horizontal" @select="handleSelect">
					  <el-menu-item v-for="menu in menuList" :key="menu.id" :index="String(menu.id)" >
							<router-link class="nav-skip" :to="menu.url">{{menu.nav_name}}</router-link>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="offset-xs4 xs2 sm-hide">
					<div class="menu-more" v-on:click="OpenMenu()"><i class="el-icon-menu"></i></div>
				</div>
			</div>
			<div class="row sm-hide">
				<el-collapse-transition>
					<div class="span12" v-show="menu_show == 1">
				    <el-menu theme="dark" default-active="1" class="el-menu-vertical" @open="handleOpen" @close="handleClose">
						  <el-menu-item v-for="menu in menuList" :key="menu.id" :index="String(menu.id)" v-on:click="skipUrl(menu.url)" >
								{{menu.nav_name}}
							</el-menu-item>
				    </el-menu>
					</div>
				</el-collapse-transition>
			</div>
		</div>
  </div>
</template>
<script type="text/javascript">
	export default {
	  name: 'hello',
	  data () {
	    return {
	    	menu_show: 0,
	    	menuList:[],
	    	default_active:0,
	    }
	  },
	  created:function(){
	  	this.$http.get('/api/nav/index').then(function(result){
        var data = result.body.data;
        this.menuList = data['list'];
        this.default_active = this.menuList[0].id;
      })
	  },
	  methods: {
	    handleSelect(key, keyPath) {
	      // console.log(key, keyPath);
	    },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
	    OpenMenu(){
	    	this.menu_show = this.menu_show == 0 ? 1:0;
	    },
	    skipUrl(url){
	    	this.$router.push({ path: url })
	    }
	  }
	}
</script>

<style lang="scss">
.nav{background-color: #324157;}
.nav-skip{height:60px;display:inline-block;width:100%;padding:0 20px;text-decoration: none;font-size:16px;}
.el-menu-item {padding: 0px}
.nav .logo{width:150px;color: #fff;height: 60px;font-size: 22px;line-height:60px;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
.nav .logo img{width:25px;height:25px;margin-top: 16px;float: left;margin-right: 5px;}
.nav .logo span{font-size: 20px;}
.nav .container{}
.nav .el-menu-parallel{display: inline-block;float: right;margin-right: 30px;}
.nav .menu-more{color:#fff;line-height: 60px;text-align: center;cursor: pointer;}
.nav .el-menu-vertical{width:100%;}
</style>